DrawLayout = function(canvas) {
	this.startPoint={x:null,y:null};
	this.currentPoint={x:null,y:null};
	this.stageSize={x:canvas.width,y:canvas.height};
	this.context= canvas.getContext("2d");
	this.cellSize=20;
	this.wallWidth=10;
	this.offsetSize={x:canvas.offsetLeft,y:canvas.offsetTop};
	this.planes=[];
};
DrawLayout.prototype.constructor = DrawLayout;

DrawLayout.prototype.drawStage=function(){
	var rows=this.stageSize.y/this.cellSize;
	var coloums=this.stageSize.x/this.cellSize;
	
	this.context.beginPath();
	for (var i=0; i < rows; i++) {	  		
		this.context.moveTo(0, this.cellSize*i);
		this.context.lineTo(this.stageSize.x, this.cellSize*i);
	};	
	for (var j=0; j < coloums; j++) {
	  	this.context.moveTo(this.cellSize*j,0);
	  	this.context.lineTo(this.cellSize*j,this.stageSize.y);
	};
	this.context.strokeStyle="rgba(0,0,0,0.5)";
	this.context.lineWidth=1;
	this.context.fill();
	this.context.stroke();
	this.context.closePath();
};
DrawLayout.prototype.startDarwArea=function(e){
		// this.currentPoint.x=e.pageX - this.offsetSize.x;
		// this.currentPoint.y=e.pageY - this.offsetSize.y;
		this.startPoint.x=e.pageX - this.offsetSize.x;
		this.startPoint.y=e.pageY - this.offsetSize.y;	
		
		this.startPoint.x = Math.floor(this.startPoint.x / this.cellSize) * this.cellSize;
		this.startPoint.y = Math.floor(this.startPoint.y / this.cellSize) * this.cellSize;
	
};
DrawLayout.prototype.move=function(e){
		this.currentPoint.x=e.pageX - this.offsetSize.x;
		this.currentPoint.y=e.pageY - this.offsetSize.y;
		
		this.currentPoint.x = Math.floor(this.currentPoint.x / this.cellSize) * this.cellSize;
		this.currentPoint.y = Math.floor(this.currentPoint.y / this.cellSize) * this.cellSize;
};
DrawLayout.prototype.addPlane=function(){
		var planeSize={startPoint:{x:this.startPoint.x,y:this.startPoint.y},currentPoint:{x:this.currentPoint.x,y:this.currentPoint.y}};
		this.planes.push(planeSize);
		console.warn(planeSize);
};
DrawLayout.prototype.drawArea=function(e){
	if(this.startPoint.x){
		this.currentPoint.x=e.pageX - this.offsetSize.x;
		this.currentPoint.y=e.pageY - this.offsetSize.y;
		for (var i=0; i < this.planes.length; i++) {
		  var plane=this.planes[i];
		  var planeCenter={x:(plane.currentPoint.x+plane.startPoint.x)/2,y:(plane.currentPoint.y+plane.startPoint.y)/2};
		  var planeSize={x:null,y:null};
		  
		  var currentCenter={x:(this.currentPoint.x+this.startPoint.x)/2,y:(this.currentPoint.y+this.startPoint.y)/2};
		  var currentSize={x:null,y:null};
		  
		  if(plane.currentPoint.x>plane.startPoint.x){
		  	planeSize.x=Math.abs(plane.currentPoint.x+this.wallWidth/2-(plane.startPoint.x-this.wallWidth/2));
		  }else{
		  	planeSize.x=Math.abs(plane.currentPoint.x-this.wallWidth/2-(plane.startPoint.x+this.wallWidth/2));
		  }
		  if(plane.currentPoint.y>plane.startPoint.y){
		  	planeSize.y= Math.abs(plane.currentPoint.y+this.wallWidth/2-(plane.startPoint.y-this.wallWidth/2));
		  }else{
		  	planeSize.y= Math.abs(plane.currentPoint.y-this.wallWidth/2-(plane.startPoint.y+this.wallWidth/2));
		  }
		  
		  if(this.currentPoint.x>this.startPoint.x){
		  	currentSize.x=Math.abs(this.currentPoint.x+this.wallWidth/2-(this.startPoint.x-this.wallWidth/2));
		  }else{
		  	currentSize.x=Math.abs(this.currentPoint.x-this.wallWidth/2-(this.startPoint.x+this.wallWidth/2));
		  }
		  if(this.currentPoint.y>this.startPoint.y){
		  	currentSize.y=Math.abs(this.currentPoint.y+this.wallWidth/2-(this.startPoint.y-this.wallWidth/2));
		  }else{
		  	currentSize.y=Math.abs(this.currentPoint.y-this.wallWidth/2-(this.startPoint.y+this.wallWidth/2));
		  }		 
			if(Math.abs(planeCenter.x-currentCenter.x)<(currentSize.x+planeSize.x)/2
			&&  Math.abs(planeCenter.y-currentCenter.y)<(currentSize.y+planeSize.y)/2
			   ){
				return;
			}		  
		};
		
		this.context.strokeStyle="#99cc33";
		this.context.lineWidth=this.wallWidth;
		this.context.fillStyle='#ababab';
		this.context.strokeRect(this.startPoint.x,this.startPoint.y,this.currentPoint.x-this.startPoint.x,this.currentPoint.y-this.startPoint.y);
		// this.context.fillRect(this.startPoint.x,this.startPoint.y,this.currentPoint.x-this.startPoint.x,this.currentPoint.y-this.startPoint.y);
	}
};

DrawLayout.prototype.clearArea=function(){
	this.context.clearRect(this.startPoint.x,this.startPoint.y,this.currentPoint.x-this.startPoint.x,this.currentPoint.y-this.startPoint.y);
	
};
